<template>
  <div class="member">
    <el-table :data="data">
      <el-table-column prop="id" label="用户id" />
      <el-table-column prop="nickname" label="昵称" />
      <el-table-column prop="avatar" label="头像">
        <template slot-scope="scope">
          <img style="width: 40px;height: 40px;" :src="scope.row.avatar">
        </template>
      </el-table-column>
      <el-table-column prop="format_red_balance" label="红包金额" />
      <el-table-column prop="format_balance" label="余额">
        <template slot-scope="scope">
          <span>{{ scope.row.format_balance }}</span>
          &nbsp;&nbsp;
          <el-button type="text" @click="showEditBalanceDialog(scope.$index)">修改余额</el-button>
        </template>
      </el-table-column>
      <el-table-column prop="red_number" label="已发红包" />
      <el-table-column prop="register_date" label="注册时间" />
    </el-table>
    <!--S分页-->
    <div id="pagination">
      <el-pagination
        layout="prev, pager, next"
        :page-size="page_size"
        :total="total"
        @current-change="changePage"
      />
    </div>
    <!--E分页-->

    <!--S修改用户余额-->
    <el-dialog
      title="修改用户余额"
      :visible.sync = "editBalance.show"
    >
      <el-form
        ref="form"
        :rules="editBalance.form_rules"
        :model="editBalance.form_data"
        label-position="left"
        label-width="80px"
      >
        <el-form-item label="用户余额" prop="balance">
          <el-input v-model="editBalance.form_data.balance" placeholder="用户余额" />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="editBalance.show = false">取消</el-button>
        <el-button type="primary" @click="submitEditBalance">确定修改</el-button>
      </span>
    </el-dialog>
    <!--E修改用户余额-->
  </div>
</template>

<script>
export default {
  name: 'Member',
  data() {
    const checkBalance = (rule, value, callback) => {
      if (!/(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/.test(value)) {
        callback(new Error('请输入正确的金额'))
      }
      callback()
    }
    return {
      // 会员总数
      total: 0,
      page_size: 10,
      page: 1,
      data: [],
      // 修改会员下标
      handle_index: 0,
      // 修改用户余额区域
      editBalance: {
        show: false,
        form_data: {
          balance: ''
        },
        form_rules: {
          balance: [
            { required: true, message: '不能为空', trigger: 'blur' },
            { validator: checkBalance, trigger: 'blur' }
          ]
        }
      }
    }
  },
  mounted() {
    this.getTotal()
    this.getList()
  },
  methods: {
    // 获取会员总数
    getTotal() {
      this.$get('member/total')
        .then((res) => {
          this.total = res.data.data
        })
    },
    // 获取会员列表
    getList() {
      this.$get('member', {
        limit: [(this.page - 1) * this.page_size, this.page_size]
      })
        .then((res) => {
          this.data = res.data.data
        })
    },
    // 切换页面
    changePage(page) {
      this.page = page
      this.getList()
    },
    // 显示编辑用户余额窗口
    showEditBalanceDialog(index) {
      this.handle_index = index
      let data = this.data[index]
      this.editBalance.show = true
      this.editBalance.form_data.balance = data.format_balance
    },
    // 提交修改用户余额
    submitEditBalance() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.$put('member/editBalance/' + this.data[this.handle_index].id, {
            balance: this.editBalance.form_data.balance
          })
            .then(() => {
              this.$message.success('修改成功')
              this.getList()
              this.editBalance.show = false
            })
            .catch((error) => {
              this.$handleError(error)
            })
        }
      })
    }
  }
}
</script>

<style scoped lang="scss">
  #pagination{
    text-align: center;
  }
</style>
